import React, {Component} from 'react'
import {Button, Card, Form, Icon, Input, message, Table} from 'antd'
import OperationModal from './OperationModal'
import {fetchPost} from '../../../utils/request'

const FormItem = Form.Item
class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      modalVisible: false,
      currentProduct: {},
      type: null,
      searchParams: null,
      page: {
        currentPage: 1,
        pageSize: 10
      },
      data: []
    }
  }
  componentDidMount () {
    this.getData()
  }
  // 显示设置弹框
  showOperationModal (type, product) {
    this.setState({
      modalVisible: true,
      currentProduct: product,
      type
    })
  }
  // 取消弹框
  cancelModal () {
    this.setState({
      modalVisible: false
    })
  }
  // 结束弹框 and 刷新 列表
  finishModal () {
    console.log('===get data')
    this.setState({
      modalVisible: false
    }, () => this.resetSearchParams())
  }
  // 重置
  resetSearchParams () {
    this.props.form.resetFields()
    this.setState({
      searchParams: null
    }, () => this.getData())
  }
  // 搜索
  search (e) {
    // 阻止页面刷新
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values)
        this.setState({
          searchParams: values
        }, () => this.getData()
        )
      }
    })
  }
  // 获取表格数据
  getData () {
    const url = `/product/list2?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`
    fetchPost(url, this.state.searchParams).then((res) => {
      if (res.code === 0) {
        if (res.data !== null) {
          this.setState({
            data: res.data.productCategoryList,
            page: res.page
          })
        }
      } else {
        message.error(res.msg)
      }
    })
  }
  nextPage (currentPage) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage
      }
    }, () => {
      this.getData()
    })
  }
  render () {
    console.log('---渲染----', this.state.data)
    let self = this
    const columns = [{
      title: 'No',
      dataIndex: 'id'
    }, {
      title: 'Product',
      dataIndex: 'name'
    }, {
      title: 'Daily-newusers quantity',
      dataIndex: 'applyLimiterNewUserNum'
    }, {
      title: 'Daily-regularusers quantity',
      dataIndex: 'applyLimiterOldUserNum'
    }, {
      title: 'Home recommendation',
      dataIndex: 'bestSelling',
      render: (text) => {
        return (text ? 'Yes' : 'No')
      }
    }, {
      title: 'Operate',
      dataIndex: 'Operate',
      render: (text, record) => {
        return (
          <span>
            <Button onClick={() => this.showOperationModal('SetQuantity', record)}>Set quantity</Button>
            <span className='ant-divider' />
            <Button onClick={() => this.showOperationModal('Recommend', record)}>Recommend</Button>
          </span>
        )
      }
    }]

    const { getFieldDecorator } = this.props.form
    const pagination = {
      total: this.state.page.totalCount,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: false,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextPage(current)
      }
    }
    return (
      <div>
        <Card bordered={false}>
          <Form inline onSubmit={(e) => this.search(e)}>
            <FormItem label='Product' >
              {getFieldDecorator('productCategoryName', {
                rules: [ {
                  required: true, message: 'Please input !'
                }]
              })(<Input />)}
            </FormItem>
            <FormItem>
              <Button type='primary' htmlType='submit'>Search</Button>
              <Button style={{marginLeft: 6}} onClick={() => this.resetSearchParams()}><Icon type='reload' /></Button>
            </FormItem>
          </Form>
        </Card>
        <Table columns={columns} dataSource={this.state.data} loading={false} bordered pagination={pagination} rowKey='id' />
        <OperationModal visible={this.state.modalVisible} product={this.state.currentProduct} type={this.state.type}
          onCancel={this.cancelModal.bind(this)} onOk={this.finishModal.bind(this)}
        />
      </div>
    )
  }
}

export default Form.create()(Index)
